<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>$CODE$</title>  

<style>
#container{  
  background-color: white;  
  width: 100%;  
  height: 1050px;  
}

path{  
  fill: none;  
  stroke: red;  
  stroke-width: 2 ;  
}  

.domain,.tick line{  
  stroke: gray;  
  stroke-width: 1;  
}  
</style>
</head>  

<body>  
  <br/>
  <center><b>$CODE$</b></center>
  <br/>

  <div id="container"></div>  
  <script src="http://d3js.org/d3.v2.js"></script>  
 
<script>
  var width = 800,height = 800,  
  margin = {left:50,top:30,right:20,bottom:20},  
  g_width = width-margin.left-margin.right,  
  g_height = height-margin.top-margin.bottom;  
  
  //svg  
  var svg = d3.select("#container").append("svg").attr("width",width).attr("height",height)  
  
  //g元素  
  var g = d3.select("svg").append("g").attr("transform","translate("+margin.left+","+margin.top+")")  

  //var data = [1,3,5,7,8,4,3,7,8,8,3]  
  var data = $DATA$ 
  
  // 设置比例缩放  
  var scale_x = d3.scale.linear().domain([0,data.length-1]).range([0,g_width])  
  var scale_y = d3.scale.linear().domain([0,d3.max(data)]).range([g_height,0])
  
  // 绘制曲线  
  var line_generator = d3.svg.line()  
    .x(function(d,i){  
        return scale_x(i);  
    })  
    .y(function(d){  
        return scale_y(d);  
    })  
    .interpolate("cardinal");  
  

  d3.select("g").append("path").attr("d",line_generator(data))
  
  // 添加坐标轴函数：axis（）  
  var x_axis = d3.svg.axis().scale(scale_x),  
    y_axis = d3.svg.axis().scale(scale_y).orient("left");  
  
  // 依次添加X、Y坐标轴,并通过偏移量的设置使得X坐标轴往下移  
  g.append("g")  
    .call(x_axis)  
    .attr("transform","translate(0,"+g_height+")")  
  
  g.append("g")  
    .call(y_axis)  
    .append("text")  
    .text("Rate")  
    .attr("transform","rotate(-90)")  
    .attr("text-anchor","end")  
    .attr("dy","1em")  

</script>  

    

    <br/>
    $DETAILS$  
</body>  
</html>  